<template>
  <div>
    <el-card class="box-card">
      <h1 class="title">广播历史记录</h1>
      <!-- 选择器 -->
      <el-select v-model="call_id" placeholder="请选择" style="margin-bottom: 10px;">
        <el-option v-for="item in callData" :key="item.id" :label="item.Initiator_name" :value="item.Initiator_id"> </el-option>
      </el-select>
      <!-- 搜索 -->
      <el-button type="primary" icon="el-icon-search" style="margin-bottom: 10px;margin-left: 10px;" @click="historySearch">搜索</el-button>
      <el-table :data="historyData" border style="width: 100%">
        <el-table-column prop="timestamp" label="播报时间" width="180">
        </el-table-column>
        <el-table-column prop="status_msg" label="播报状态" width="180">
        </el-table-column>
        <el-table-column prop="call_id_name" label="接收地" width="180">
        </el-table-column>
        <el-table-column prop="content" label="播报内容/播报文件路径">
          <template slot-scope="props">
            <el-popover
              placement="top-start"
              title="播报内容"
              width="200"
              trigger="hover"
              :content="props.row.content"
            >
              <div slot="reference">
                {{
                  props.row.content === null
                    ? ""
                    : props.row.content.slice(0, 50)
                }}
              </div>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- <el-pagination
        @current-change="page_change"
        layout="prev, pager, next"
        :total="100"
      >
      </el-pagination> -->
      <el-pagination
        @current-change="page_change"
        background
        layout="prev, pager, next"
        :page-count="paging.total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { sipHistoryData,ajaxInitiator } from "@/api/sip";
export default {
  data() {
    return {
      // sip数据表格
      historyData: [],
      // 接受地数据
      callData:[],
      // 选择发起地id
      call_id:'',
      // 分页
      paging: {
        pag: 1,
        limit: 10,
        total: 100,
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    // 初始化数据
    async init(page,search) {
      //历史数据
      const res = await sipHistoryData({ pag: page || 1, limit: 50 ,call_id:this.call_id});
      let name = JSON.parse(localStorage.getItem("HSKJ-username"))
      // 发起地数据
      const ajaxCallres = await ajaxInitiator({userChanne:name})

      this.callData = ajaxCallres.data.meta.data
      // 接收数据
      this.historyData = res.data.data.rows;
      // 分页条数
      this.paging.total = res.data.data.total;
      // 转换时间戳
      this.historyData.forEach((item) => {
        //$moment组件需要10位数所以乘以1000
        item.timestamp = this.$moment(item.timestamp * 1000).format(
          "YYYY-MM-DD/HH:mm"
        );
      });
    },
    // 搜索历史记录
    async historySearch(){
      this.init(1,this.cal)
    },
    // 改变页数时触发
    page_change(page) {
      // 改变分页时候触发
      this.init(page);
    },
  },
};
</script>

<style>
.title {
  text-align: center;
}
</style>
